<template>
  <div id="header">
    <div class="title">我的</div>
    <div class="top">
      <div class="top-left">
        <img src="../assets/images/people.png" alt="" />
      </div>
      <div class="top-right">
        <router-link to="mylogin" class="phone">
          <span v-if="!isShow">登录/注册</span>
          <span v-if="isShow">{{uname}}</span>
        </router-link>
        <div class="text-phone"></div>
      </div>
      <div class="jiantou">
        <img src="../assets/images/arrow-right.png" alt="" />
      </div>
    </div>
    <div class="middle">
      <ul class="gongneng">
        <li>
          <div class="left-qian">
            <img src="../assets/images/qian.png" alt="" />
          </div>
          <div class="middle-qian">平台红包</div>
          <div class="right-qian r1">
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </li>
        <li>
          <div class="left-qian">
            <img src="../assets/images/youhuijuan.png" alt="" />
          </div>
          <div class="middle-qian">商家优惠劵</div>
          <div class="right-qian r2">
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </li>
        <li>
          <div class="left-qian">
            <img src="../assets/images/juan.png" alt="" />
          </div>
          <div class="middle-qian">店铺小票</div>
          <div class="right-qian r3">
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </li>
        <li>
          <div class="left-qian">
            <img src="../assets/images/duihuanma.png" alt="" />
          </div>
          <div class="middle-qian">兑换码</div>
          <div class="right-qian r4">
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </li>
        <li>
          <div class="left-qian">
            <img src="../assets/images/liaotian.png" alt="" />
          </div>
          <div class="middle-qian">客服中心</div>
          <div class="right-qian r5">
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </li>
        <li>
          <div class="left-qian">
            <img src="../assets/images/guanyu.png" alt="" />
          </div>
          <div class="middle-qian">关于我们</div>
          <div class="right-qian r6">
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </li>
        <li>
          <div class="left-qian">
            <img src="../assets/images/shezhi.png" alt="" />
          </div>
          <div class="middle-qian">设置</div>
          <div class="right-qian r7">
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom">版本号V2.1.34</div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myFooter from "@/components/myfooter.vue";


export default {
  components: {
    myFooter
  },
  data(){
    return {
      uname:"",
      isShow: false
    }
  },
  mounted(){
    let user =this.$route.query
    if(user.name !=undefined){
      this.uname = user.name;
      this.isShow = true;
    }
    console.log(user);
    
  }
};
</script>

<style lang="scss" scoped>
#header {
  .title {
    text-align: center;
  }
  .top {
    margin-top: 20px;
    display: flex;
    .top-left {
      margin-right: 10px;
      img {
        border-radius: 60px;
        width: 50px;
        height: 50px;
      }
    }
    .top-right {
      margin-top: 17px;
      .phone {
        text-decoration: none;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .text-phone {
        margin-bottom: 10px;
      }
    }
    .jiantou {
      position: relative;
      img {
        position: absolute;
        top: 10px;
        left: 145px;
        width: 15px;
        height: 15px;
      }
    }
  }
  .middle {
    .gongneng {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        margin-top: 10px;
        display: flex;
        .left-qian {
          margin-left: 10px;
          margin-right: 10px;
          img {
            width: 30px;
            height: 30px;
          }
        }
        .middle-qian {
          margin-left: 10px;
          font-size: 14px;
          height: 40px;
          line-height: 40px;
        }
        .right-qian {
          img {
            width: 15px;
            height: 15px;
          }
        }
        .r1 {
          margin-left: 161px;
        }
        .r2 {
          margin-left: 148px;
        }
        .r3 {
          margin-left: 161px;
        }
        .r4 {
          margin-left: 176px;
        }
        .r5 {
          margin-left: 161px;
        }
        .r6 {
          margin-left: 161px;
        }
        .r7 {
          margin-left: 188px;
        }
      }
      li:last-child {
        border-bottom: transparent;
      }
    }
  }
  .bottom {
    margin-top: 50px;
    margin-bottom: 80px;
    font-size: 14px;
    text-align: center;
    color: #aeaeae;
  }
}
</style>



